<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js中的各种宽高以及位置总结</title>
	</head>
	<body>
		<ol>
			<li>
				<b>只读属性</b><br>
				<p>所谓的只读属性指的是DOM节点的固有属性，该属性只能通过js去获取而不能通过js去设置，而且获取的值是只有数字并不带单位的（px,em等）</p>
				<ul>
					<li>
						<b>clientWidth和clientHeight</b><br>
						该属性指的是元素的可视部分宽度和高度，即padding+content，如果没有滚动条，即为元素设定的高度和宽度，
						如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高<br>
						<hr>
					</li>
					<li>
						<b>offsetWidth和offsetHeight</b><br>
						这一对属性指的是元素的border+padding+content的宽度和高度，该属性和其内部的内容是否超出元素大小无关，
						只和本来设定的border以及width和height有关<br>
						<hr>
					</li>
					<li>
						<b>clientTop和clientLeft</b><br>
						这一对属性是用来读取元素的border的宽度和高度的。<br>
						<hr>
					</li>
					<li>
						<b>offsetLeft和offsetTop</b><br>
						说到这对属性就需要说下offsetParent,所谓offsetParent指的是当前元素的离自己最近的具有定位的
						（position:absolute或者position：relative）父级元素（不仅仅指的是直接父级元素，只要是它的父元素都可以），
						该父级元素就是当前元素的offsetParent，如果从该元素向上寻找，找不到这样一个父级元素，
						那么当前元素的offsetParent就是body元素。而offsetLeft和offsetTop指的是当前元素，相对于其offsetParent左边距离和上边距离，
						即当前元素的border到包含它的offsetParent的border的距离<br>
						<hr>
					</li>
					<li>
						<b>scrollHeight和scrollWidth</b>
						顾名思义，这两个属性指的是当元素内部的内容超出其宽度和高度的时候，元素内部内容的实际宽度和高度，需要注意的是，
						当元素其中内容没有超过其高度或者宽度的时候，该属性是取不到的。<br>
						<hr>
					</li>
				</ul>
			</li>
		</ol>
	</body>
</html>
